<template>
  <div class="property">
    <div class="item_name" :title="`${property.name}(${property.description})`">{{ property.name }}</div>
    <div class="readonly_flag">
      <StringProp v-model="stringRef" :readonly="readonly" :name="property.name"
        @ondrop="event => callback('ondrop', event)" @ondragover="event => callback('ondragover', event)"
        @ondragleave="event => callback('ondragleave', event)">
      </StringProp>
    </div>
  </div>
</template>

<script setup lang="ts">
import { createVueDisposer, toReadonlyVueRef, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
import { onBeforeUnmount, getCurrentInstance } from "vue"
import StringProp from "../commons/StringProp.vue"
const props = withDefaults(defineProps<{ property: any }>(), {})
const { property } = props
const readonly = property.readonly
const disposer = createVueDisposer(onBeforeUnmount)
const stringRef = readonly ? toReadonlyVueRef<string | undefined>(disposer, property.reactVar, s => s) : toVR<string | undefined>(disposer, property.reactVar, s => s)
const intstance = getCurrentInstance();
const emits = defineEmits<{
  (e: 'callback', params: any): void;
}>();
const callback = (customEventName: string, event: MouseEvent) => {
  if (!intstance) {
    return
  }
  emits('callback', {
    componentInstance: intstance,
    property,
    customEventName,
    otherParams: [event],
  })
}
</script>
<style scoped>
.property {
  width: 100%;
  display: flex;
}

.item_name {
  width: 70px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  color: rgba(230, 230, 230, 1);
  font-size: 14px;
}

.readonly_flag {
  flex: 1;
  min-width: 20px;
}
</style>
